<template>
	<view>
		<view class="bg-colore"></view>
		<view>
<!-- 			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar> -->
		</view>
		<view class="field" v-for="item in fieldData" key="index">
			<!-- 			<navigator url="/pages/navigation/navigation"> -->
			<view class="left" @click="onClick(item)">
				<image :src="item.url" mode="aspectFill"></image>
			</view>
			<view class="right" @click="onClick(item)">
				<view>{{item.name}}</view>
			</view>
			<!-- 			</navigator> -->
		</view>
		<button class="button" type="primary" @click="search">
			更多搜索
		</button>
		<view class="search-result">
			<view v-for="(item,index) in searchResult" class="searchBox" key="index">
				{{item.name}}
			</view>
		</view>
		<button class="button" type="primary" @click="navigation">
			搜索结果导航
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	let la = ref(0);
	let lo = ref(0);

	const searchResult = ref();

	const search = () => {
		uni.chooseLocation({
			success: function(res) {
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
				la.value = res.latitude;
				lo.value = res.longitude;
				// Assuming you want to set search results based on location, you might want to add your logic here
				searchResult.value = [{
					name: res.name
				}];
			}
		});
	}
	const navigation = () => {
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: function(res) {
				uni.openLocation({
					latitude: la.value,
					longitude: lo.value,
					success: function() {
						console.log('success');
					}
				});
			}
		});
	}
const fieldData = ref([{
			name: "武汉大学信息学部操场",
			department: "信息学部",
			latitude: 30.527658980298032,
			longitude: 114.36133040050717,
			url: "http://s-pic.oss-cn-beijing.aliyuncs.com/desensitize/images/publish/b92690c57fdd03bfaba37079231b3d3d.jpg?type=pic"
		},
		{
			name: "武汉大学桂园操场",
			department: "文理学部",
			latitude: 30.53805065779084,
			longitude: 114.36068532925012,
			url: "https://aos-comment.amap.com/B0FFFH8Q20/headerImg/246e1241f0cecb103fad1884724649b0_2048_2048_80.jpg?type=pic"
		},
		{
			name: "武汉大学九一二操场",
			department: "文理学部",
			latitude: 30.53875179030253,
			longitude: 114.36637429447339,
			url: "https://aos-comment.amap.com/B0FFF35L7C/comment/0512061577ed4666464fcc97a5d4fa6f_2048_2048_80.jpg?type=pic"
		},
		{
			name: "武汉大学工学部田径场",
			department: "工学部",
			latitude: 30.54339854224795,
			longitude: 114.36814723460189,
			url: "http://store.is.autonavi.com/showpic/149ce7d6ea799775023bd1fed49e651b?type=pic"
		},
		{
			name: "武汉三镇足球俱乐部",
			department: "江夏区",
			latitude: 30.471866,
			longitude: 114.456114,
			url: "http://store.is.autonavi.com/showpic/9aad22ae1cae74c7785158f3b8ad9c5a"
		},
		{
			name: "武汉东湖阳光足球场",
			department: "洪山区",
			latitude: 30.533679,
			longitude: 114.387026,
			url: "http://store.is.autonavi.com/showpic/3eb3f461c6c9fdf3efebf70e9ec723ca"
		},
	]);

	function onClick(item) {
		uni.navigateTo({
			url: "/pages/navigation/navigation?fieldData=" + encodeURIComponent(JSON.stringify(item))
		});
	}

	const value = ref(1);

	const range = ref([{
			value: 0,
			text: "<0.5km"
		},
		{
			value: 1,
			text: "<1km"
		},
		{
			value: 2,
			text: "<1.5km"
		},
		{
			value: 2,
			text: "1.5km以上"
		},
	]);

	const change = (e) => {
		console.log("e:", e);
	};
	const searchValue = ref();

	function input() {
		searchValue.value = searchValue
	}
</script>

<style lang="scss" scoped>
	.bg-colore{
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
	    z-index: -1;
	}
	.field {
		display: flex;
		align-items: center;
		padding: 10rpx;
		/* 添加一些内边距 */
		margin-top: 10rpx;
		border: 5px solid;
		/* 设置边框宽度 */
		border: 1px solid rgba(0, 0, 0, 0.1);
		/* 设置淡淡的边框 */
		border-radius: 10rpx;
		/* 添加圆角 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
	}

	.left {
		width: 320rpx;
		height: 160rpx;
		border: 1px solid #ddd;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* 使用 cover 来保持图片比例并填充整个容器 */
		}

		/* 确保图片不会溢出边界 */
	}


	.right {
		flex: 1;
		padding-left: 10px;
	}

	.title {
		font-size: 16px;
		/* 根据需要调整文字大小 */
	}

	.button {
		width: 50%;
		/* 		display: flex; */
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.button .text {
		display: flex;
		justify-content: center;
		/* 文本水平居中 */
		align-items: center;
		/* 文本垂直居中 */
	}

	.searchBox {
		width: 690rpx;
		margin-right: 30rpx;
		height: 80rpx;
		//background: red;
		margin-bottom: 30rpx;
	}
</style>